<template>
	<div>
        <head-top></head-top>
        <!-- 内容开始 -->
		<!-- 聊天界面 -->
		<!-- div class="callcenter_box">
			<div class="callcenter_cardbody">

			</div>
		</div>
		 -->
		      <div class="main">
		          <div class="top">
		              <div class="top-left">
		                  <div class="header"></div>
		              </div>
		              <!-- <div class="top-type">
		                  <a href="#" class="news icon-site"></a>
		                  <a href="#" class="friend icon-site"></a>
		                  <a href="#" class="file icon-site"></a>
		              </div> -->
		              <!-- <div class="top-right">
		                  <i class="ic-menu ic-same"></i>

		              </div> -->
		          </div>
		          <div class="box">
		              <div class="chat-list" >
		                  <!-- <div class="list-box select">
							  <img class="chat-head" src="../assets/img/head.jpg" alt="">
		                      <div class="chat-rig"><p class="title">买家lisa</p>
		                          <p class="text">在？</p></div>
		                  </div> -->
		                  <div class="list-box" v-for="item in adminList" @click="chartWebSocket(item.userId)">
							  <img class="chat-head" src="../assets/img/head.jpg" alt="">
		                      <div class="chat-rig"><p class="title">{{item.userName}}</p>
		                          <p class="text">{{item.message}}</p></div>
		                  </div>
		              </div>
		              <div class="box-right">
		                  <div class="recvfrom">
		                      <div class="nav-top">
		                          <p>买家{{webSocketJson.user_id}}</p>
		                      </div>
		                      <div class="news-top" id="idTop">
								  <ul >
									  <li  :key="index" v-for="(item, index) in list" :class="[item.userId!='0'?'other':'self']" :style="{height:(item.message.length>100?'150px':'80px')}">

										  <div class="avatar" v-if="item.userId!=='0'"><img src="../assets/img/head.jpg" alt=""
										  ></div>
										  <div class="avatar" v-else ><img src="../assets/img/kefu.jpg" alt=""
										  ></div>

										  <div class="msg" >
											  <p class="msg-name" v-text="item.userId!=0?item.userId:'客服'"></p>
											  <p class="msg-text">{{item.message}}</p>
											  <time v-if="formatDate(new Date(),'yyyy-MM-dd')==item.createDate"  style="float: left;color: #ccc">{{item.createTime}}</time>
											  <time v-else style="float: left;color: #ccc">{{item.createDate}}  {{item.createTime}}</time>
										  </div>

									  </li>

								  </ul>
		                      </div>
		                  </div>
		                  <div class="sendto">
		                      <div class="but-text">
								  <label>
									  <textarea  cols="10" rows="6" v-model="webSocketAdminChart.message" placeholder="请输入文字不要超过200字" maxlength="200" wrap="hard"></textarea>
								  </label>
								  <el-button type="primary" class="button" @click="sendText(webSocketAdminChart.user_id)">发送</el-button>
		                      </div>
		                  </div>
		              </div>

		          </div>


		      </div>


		<!-- 结束 -->

	</div>

</template>

<script>
	import {formatDate} from '../util/date';
    import headTop from '../components/headTop'
	export default {
		data() {
			return {
				//webSocket连接路径
				path: "ws://172.17.44.23:8080/zk/chat_websocket",
				socket: "",
				socket2: "",
				list: [],
				adminList: [],
				webSocketMap: new Map(),
				webSocketJson: {
					user_id: "",
					chat_type: "user_chat",
					message: ""

				},
				webSocketAdminChart: {
					user_id:"",
					chat_type:"admin_chat",
					message: ""
				},
				webSocketListChart: {
					user_id: "0",
					chat_type: "admin_list",
					message: ""
				}


			}
		},
		mounted() {
			// 初始化
			this.initWebSocket();
		},
		watch: {
			list:'scrollToBottom',
		},
        components: {
            headTop,
        },
		methods: {
			formatDate: function(date,format){
				return formatDate(date,format)
			},

			scrollToBottom: function(){
				this.$nextTick(()=>{
					var div = document.getElementById("idTop")
					console.log(div)
					div.scrollTop = div.scrollHeight;

				})
			},
			sendText: function () {
				this.webSocketAdminChart.user_id =this.webSocketJson.user_id;
				if(this.webSocketAdminChart.message=="")
				{
					return;
				}
				this.socket2.send(JSON.stringify(this.webSocketAdminChart));
				this.webSocketAdminChart.message=""
			},
			chartWebSocket: function (userId) {
				console.log(userId+"======================>>>")
				if(this.webSocketJson.user_id===userId)
					return;
				this.webSocketJson.user_id = userId;

				if (typeof (WebSocket) === "undefined") {
					//首先需要判断浏览器是否支持websocket
					alert("您的浏览器不支持socket")
				} else {
					// 实例化socket
					this.socket2 = new WebSocket(this.path + "?msg=" + escape(JSON.stringify(this.webSocketJson)))
					// 监听socket连接
					this.socket2.onopen = this.open
					// 监听socket错误信息
					this.socket2.onerror = this.error
					// 监听socket消息
					this.socket2.onmessage = this.getMessage
					//监听socket断开
					this.socket2.onclose = this.close;
				}
			},

			initWebSocket: function () {


				if (typeof (WebSocket) === "undefined") {
					//首先需要判断浏览器是否支持websocket
					alert("您的浏览器不支持socket")
				} else {
					// 实例化socket
					this.socket = new WebSocket(this.path + "?msg=" + escape(JSON.stringify(this.webSocketListChart)))
					// 监听socket连接
					this.socket.onopen = this.open
					// 监听socket错误信息
					this.socket.onerror = this.error
					// 监听socket消息
					this.socket.onmessage = this.getMessageList
					//监听socket断开
					this.socket.onclose = this.close;

				}
			},
			open: function () {
				console.log("socket连接成功")
			},
			error: function () {
				console.log("连接错误")
				//重新创建连接
				this.initWebSocket();
				this.chartWebSocket();
			},
			getMessageList: function (msg1) {


				console.log(msg1.data+"我点击一个怎么出来两个")
				this.adminList =  JSON.parse(msg1.data);

			},
			getMessage: function (msg) {

				console.log(msg.data+"我是初始化后得")
				this.list=  JSON.parse(msg.data);
			},
			close: function () {
				alert("服务器已经把你给关了")
			}
		},
		destroyed() {
			// 在组件销毁的时候断开websocket
			this.socket.close()
			this.socket2.close()
		},

	}


</script>
<!-- 支持less格式  scopd支持的样式区间：在此vue -->
<style lang="less" scoped>
	.pic {
		width: 100%;
	}

	.a {
		text-decoration: none;
	}

* {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    text-decoration: none;
    color: black;
    outline: none;
}

html, body {
    width: 100%;
    height: 100%;
}

.main {
    height: 600px;
    width: 1005px;
    margin: auto;
    box-shadow: 0 0 3px 5px #e1e1e1;
}

.main .top {
    width: 1005px;
    height: 60px;
    background-color: #3bb4f2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.main .top .top-left {
    height: 100%;
    width: 200px;
    float: left;
    position: relative;
}

.main .top .top-left .header {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    background-image: url("../assets/img/kefu.jpg");
    line-height: 60px;
    display: inline-block;
    margin: 6px;
    border: 1px solid transparent;
}

.main .top .top-left .header:hover {
    border: 1px solid white;
}

.main .top .top-left .search {
    display: inline-block;
    height: 30px;
    position: absolute;
    margin: 17px 14px;
}

.main .top .top-left .search input {
    display: inline-block;
    width: 110px;
    height: 30px;
    border-radius: 40px;
    border: 1px solid ghostwhite;
    text-indent: 40px;
    background-color: #3bb4f2;

}

.main .top .top-left .search input:hover {
    border: 1px solid white;
}

.main .box {
    width: 100%;
    height: 540px;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.main .box .chat-list {
    float: left;
    width: 250px;
    height: 100%;
    background-color: #f4f4f4;
}

.main .box .chat-list .list-box {
    height: 80px;
    width: 250px;
}

.main .box .chat-list .list-box.select {
    background-color: #dbdbdb;
}

.main .box .chat-list .list-box:hover {
    background-color: #dbdbdb;
}

.main .box .chat-list .list-box img.chat-head {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid #f4f4f4;
    margin: 15px 10px;
}

.main .box .chat-list .list-box .chat-rig {
    float: right;
    height: 50px;
    width: 178px;
    margin: 15px 0;
}

.main .box .chat-list .list-box .chat-rig .title {
    font-weight: 600;
    font-size: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.main .box .chat-list .list-box .chat-rig .text {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6C6C6C;
}

.main .box .box-right {
    float: left;
    width: 750px;
    height: 100%;
}

.main .box .box-right .recvfrom {
    width: 752px;
    height: 360px;

}

.main .box .box-right .recvfrom .nav-top {
    height: 45px;
    width: 100%;
}

.main .box .box-right .recvfrom .nav-top p {
    line-height: 45px;
    font-size: 18px;
    font-weight: 600;
    margin-left: 25px;
}

.main .box .box-right .recvfrom .news-top {
    height: 310px;
    border-top: 1px solid #6C6C6C;
    border-bottom: 1px solid #6C6C6C;
    overflow-y: scroll;
}

.main .box .box-right .recvfrom .news-top ul {
    height: 100%;
    width: 100%;
}

.main .box .box-right .recvfrom .news-top ul li {
    margin: 10px;
    min-height: 80px;
    position: relative;
    overflow: hidden;

}

.main .box .box-right .recvfrom .news-top ul li .avatar img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.main .box .box-right .recvfrom .news-top ul li .msg {
    top: -10px;
    margin: 8px;
    min-height: 80px;
}

.main .box .box-right .recvfrom .news-top ul li::after {
    clear: both;
    content: "";
    display: inline-block;
}

.main .box .box-right .recvfrom .news-top ul li .msg .msg-text {
    background-color:lawngreen;
    border-radius: 5px;
    padding: 8px;
}

.main .box .box-right .recvfrom .news-top ul li .msg time {
    float: right;
    color: #ccc;
}

.main .box .box-right .recvfrom .news-top ul li.other .avatar {
    position: absolute;
    left: 0;
    top: 0;
}

.main .box .box-right .recvfrom .news-top ul li.other .msg {
    position: absolute;
    left: 40px;

}

.main .box .box-right .recvfrom .news-top ul li.self .avatar {
    position: absolute;
    right: 0;
    top: 0;
}

.main .box .box-right .recvfrom .news-top ul li.self .msg {
    position: absolute;
    right: 38px;
}

.main .box .box-right .sendto {
    width: 752px;
    height: 180px;
}

.main .box .box-right .sendto .but-nav {
    height: 40px;
}

.main .box .box-right .sendto .but-nav ul li {
    float: left;
    height: 22px;
    width: 22px;
    margin: 7px 15px;
    background-size: 100% 100%;
}

.main .box .box-right .sendto .but-nav ul li:hover {
    background-color: #dbdbdb;
}


.main .box .box-right .sendto .but-text textarea {
    border: none;
    font-size: 22px;
    width: 732px;
    height: 120px;
	margin: 10px;
}

.main .box .box-right .sendto .but-text .button {
    float: right;
    padding: 5px 25px;
    margin-right: 20px;
}


</style>
